import React, { ReactElement, useEffect, useState } from 'react'
import { connect } from 'umi'
import styles from '../skin.less'
import { Select, Input } from 'antd'
import { getTtemsList } from '@/api/hero'
const { Option } = Select
const { TextArea } = Input;

interface Props {
    title: string,
    type: string,
    equipRecommend: Function
}

function Index({ title, type, equipRecommend }: Props): ReactElement {
    const [data, setData] = useState([])
    useEffect(() => {
        getTtemsList().then(res => {
            setData(res.data)
        })
    }, [])

    const handleChange = (value: Array<string>) => {
        equipRecommend(type, "equipment", value)
    }
    return (
        <div>
            <div className={styles.flex}>
                <span>
                    { title }出装
                </span>
                <div style={{
                    width: 240
                }}>
                    <Select
                        mode="multiple"
                        style={{ width: '100%' }}
                        defaultValue={[]}
                        onChange={handleChange}
                        optionLabelProp="label"
                    >
                        {
                            data.map((item: any, index) => {
                                return <Option key = { index } value={ item._id } label={ item.name }>
                                    { item.name }
                                </Option>
                            })
                        }
                        
                    </Select>
                </div>
                {/* <TextArea rows={4} /> */}
            </div>
            <div className={styles.flex}>
                <span>
                    顺风技巧
                </span>
                <div style={{
                    flex: 1
                }}>
                    <TextArea onChange={(ev) => {
                        equipRecommend(type, "tips", ev.target.value)
                    }} />
                </div>
            </div>
        </div>
    )
}

export default connect(() => {
    return {

    }
}, (dispatch) => {
    return {
        equipRecommend(classify: string, field: string, value: any) {
            dispatch({ type: "hero/equipRecommend", classify, field, value })
        }
    }
})(Index)
